<template>
  <section class="comment-container">
    <div class="top-bar">
      <div class="top-bar-tag"></div>
      <div class="top-bar-title">您的意见</div>
    </div>
    <div class="main">
      <div class="comment-box">
        <el-input type="textarea" :rows="5" v-model="comment" autofocus placeholder="请输入审批意见"></el-input>
      </div>

      <div class="btn-box">
        <div>
          <el-button plain type="success" :loading="loading.pass" @click="submit">通过</el-button>
          <el-button plain type="danger" :loading="loading.reject" @click="reject">退回</el-button>
        </div>
        <div class="person-list">
          <el-checkbox v-model="addAuditorList">添加下级审批人员名单</el-checkbox>
          <el-select v-model="auditorIdList" multiple v-if="addAuditorList">
            <el-option v-for="item in userList" :value="item.value" :label="item.label"
                       :key="item.value"></el-option>
          </el-select>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import userAPI from '@/api/system/user'
  export default {
    name: 'FlowApproveComment',
    props:{
      params:{
        type:Object
      }
    },
    data() {
      return {
        loading:{
          pass:false,
          reject:false
        },
        addAuditorList:false,
        comment:'',
        auditorIdList: [],
        userList:[]
      }
    },
    created() {
      this.getUserList()
    },
    methods: {
      getUserList() {
        userAPI.getSelectList('').then(res => {
          this.userList = res.result
        })
      },
      submit(){
        if(this.loading.pass){
          return
        }
        this.loading.pass = true
        this.params.API.doAudit(this.params.id,{comments:this.comment,auditorIdList:this.auditorIdList}).then(res=>{
          this.loading.pass = false
          this.$message.success('审批成功')
          this.$router.push(this.params.url)
        })
      },
      reject(){
        if(this.loading.reject){
          return
        }
        this.$confirm('确定退回吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.loading.reject = true
          this.params.API.doAuditBack(this.params.id).then(res=>{
            this.loading.reject = false
            this.$message.success('审批成功')
            this.$router.push(this.params.url)
          })
        })

      },
    }
  }
</script>

<style scoped lang="scss">
  $height:35px;
  $borderColor:1px solid #e0e0e0;
  $boxShadow:0 0 3px rgba(0,0,0,0.1);
  .comment-container {
    border: $borderColor;
    margin-bottom: 20px;
    box-shadow: $boxShadow;

    .main {
      padding: 15px;
      background: white;
      display: flex;
      justify-content: space-between;
      .comment-box {
        width: 70%;
        margin-right: 20px;
      }
      .btn-box {
        width: 30%;
      }
    }
    .top-bar {
      height: $height;
      line-height: $height;
      padding: 0 15px;
      background-color: #FBFBFB;
      border-bottom: $borderColor;
      display: flex;
      justify-content: space-between;
      .top-bar-tag {
        width: 5px;
        height: $height;
      }
      .top-bar-title{
        font-size: 16px;
      }
      .top-bar-section {

      }
    }

    .btn-box {
      .person-list {
        .el-checkbox {
          margin:20px 0 10px;
        }
      }
    }

  }
</style>
